<template>
	<view class="xiugaimima_container">
		<uni-icons class="fanhui" color=white type="arrowleft" size="25" @click="back"></uni-icons>
		<view class="xiugaimima_box">
			<view class="avatar_box">
				<image :src="require('../../static/logo.jpg')" class="img">
			</view>
			<view :model="xiugaimimaform" class="xiugaimima_form">
				<view class="xinmimaform">
					<input class="xinmima"  placeholder="请输入新密码" type="password" v-model="xiugaimimaform.xinmima"
						@blur="isdisabled" style="font-size: 28rpx"></input>
					<label>新密码：</label>
				</view>
				<view class="querenmimaform">
					<input class="querenmima" placeholder="请再次输入密码" type="password" v-model="xiugaimimaform.querenmima"
						@blur="isdisabled" style="font-size: 28rpx"></input>
					<label>确认密码：</label>
				</view>
				<button :class="{ finish: xiugaimimaform.isfinish, nofinish: xiugaimimaform.nofinish }"
					@click="updatePswd" v-bind:disabled="xiugaimimaform.isable">完成</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function (option) {
			console.log(option)
			this.userId = option.userId
		},
		data() {
			return {
				xiugaimimaform: {
					isable: true,
					isfinish: false,
					nofinish: true,
					xinmima: "",
					querenmima: "",
				},
				userId: "",
			};
		},
		methods: {
			updatePswd() {
				uni.request({
					url: this.baseurl + '/newpswd',
					method: "POST",
					header: {
						'content-type': "application/x-www-form-urlencoded",
					},
					data: {
						userId: this.userId,
						newPswd: this.xiugaimimaform.xinmima,
					},
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: "修改密码成功",
								icon: 'none',
								duration: 2000,
							});
							setTimeout(() => {
								uni.navigateTo({
									url:'./login'
								});
							}, 1000);
						}
					}
				})
			},
			back()
			{
				uni.navigateBack({})
			},
			isdisabled() {
				var a1 = this.xiugaimimaform.xinmima;
				var a2 = this.xiugaimimaform.querenmima;
				if (a1 !== "" && a2 !== "") {
					this.xiugaimimaform.isable = false;
					this.xiugaimimaform.isfinish = true;
					this.xiugaimimaform.nofinish = false;
				} else {
					this.xiugaimimaform.isable = true;
					this.xiugaimimaform.isfinish = false;
					this.xiugaimimaform.nofinish = true;
				}
				if (a2 !== "" && a2 !== a1) {
					alert("两次输入密码不一致，请重新输入！")
					this.xiugaimimaform.xinmima = "";
					this.xiugaimimaform.querenmima = "";
					this.xiugaimimaform.isable = true;
					this.xiugaimimaform.isfinish = false;
					this.xiugaimimaform.nofinish = true;
				}
			},
		}
	}
</script>

<style scoped>
	.xiugaimima_container {
		background-color: #c0e9ff;
		height: 100vh;
		width: 100vw;
	}

	.xiugaimima_box {
		width: 80vw;
		height: 60vh;
		background-color: #ffffff;
		border-radius: 10%;
		position: relative;
		left: 10vw;
		top: 27vh;
	}

	.avatar_box {
		height: 300rpx;
		width: 300rpx;
		border: 1px solid #eee;
		border-radius: 50%;
		padding: 5%;
		box-shadow: 0 0 10px rgb(12, 166, 255);
		position: relative;
		left: 19vw;
		top: -350rpx;
	}
	
	.img {
		width: 240rpx;
		height: 240rpx;
		border-radius: 50%;
		position: relative;
		left: -2rpx;
		top:-2rpx;
	}

	.xiugaimima_form {
		width: 100vw;
		height: 100%;
		position: relative;
		width: 100%;
		top: -19.5vh;
		box-sizing: border-box;
	}

	.xinmimaform {
		cursor: pointer;
		position: relative;
		top: 15vh;
		left: 8.5vw;
	}

	.xinmima {
		height: 4vh;
		width: 50vw;
		float: right;
		border: 2px solid #eee;
		border-radius: 10rpx;
		position: relative;
		left: -13vw;
		top: -0.5vh;
	}

	.querenmimaform {
		cursor: pointer;
		position: relative;
		top: 19vh;
		left: 4vw;
	}

	.querenmima {
		height: 4vh;
		width: 50vw;
		float: right;
		border: 2px solid #eee;
		border-radius: 10rpx;
		position: relative;
		left: -8.7vw;
		top: -2vh;
	}

	.nofinish {
		width: 50vw;
		height: 5vh;
		font-size: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #bebebe;
		border-radius: 50rpx;
		position: relative;
		top: 30vh;
	}

	.finish {
		width: 50vw;
		height: 5vh;
		font-size: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		color: white;
		background-color: #20b0ff;
		position: relative;
		top: 30vh;
	}
	.fanhui
	{
		position: relative;
		top:4vh;
		left:4vw;
	}
</style>
